<template>
  <t-modal
    title="查看"
    width="1408px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="add-modal-container"
    forceRender
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <div class="name">{{ subtitle }}：</div>
      <div class="card">
        <a-empty v-if="imageList.length == 0" />
        <div
          class="image-container"
          v-for="(item, index) in imageList"
          :key="item.dfsFileUuid"
          :class="[filterClass(imageList)]"
        >
          <div
            class="delete-icon"
            @click="handleDeleteImage(item, index)"
            v-if="subtitle == '施工封样' && parameter.edit"
          >
            <a-icon type="close" />
          </div>
          <ViewerImg :toolbar="false">
            <img :src="item.url" />
          </ViewerImg>
        </div>
      </div>
    </div>
  </t-modal>
</template>

<script>
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import {
  detailSealSampleManage,
  updateConstructionSealingSample,
} from "@/api/design";
export default {
  components: { ViewerImg },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    subtitle: {
      type: [String, Number],
      default: "",
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      footer: { footer: null },
      imageList: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleDeleteImage(item, index) {
      this.imageList.splice(index, 1);
      let { uuid } = this.parameter;
      let formJson = {
        uuid,
        constructionSealingSample: JSON.stringify(this.imageList),
      };
      updateConstructionSealingSample(formJson)
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("删除成功", 1.5);
            this.$parent.getTableData();
          } else {
            this.$message.error(res?.message ?? "删除失败");
          }
        })
        .catch((_) => {
          this.$message.error(_?.message ?? "删除失败");
        })
        .finally((_) => {});
    },
    //详情
    getDetail() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.parameter;
        detailSealSampleManage({
          uuid,
        })
          .then((res) => {
            let { data } = res;
            if (this.subtitle == "设计封样") {
              this.imageList =
                JSON.parse(data?.designSampleSealing ?? "[]") || [];
            }
            if (this.subtitle == "施工封样") {
              this.imageList =
                JSON.parse(data?.constructionSealingSample ?? "[]") || [];
            }
            resolve();
          })
          .catch((_) => {
            this.imageList = [];
            reject();
          });
      });
    },

    //重置表单
    resetForm() {
      this.imageList = [];
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    filterClass(list) {
      if (list.length == 1) {
        return "one";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 24px 16px 24px 32px;
    box-sizing: border-box;
    height: 584px;
    overflow: hidden;

    display: flex;
    .name {
      text-align: right;
      min-width: 80px;
      font-size: 14px;
      color: #666666;
      padding-top: 4px;
    }
    .card {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
      position: relative;
      .image-container {
        width: 300px;
        height: 224px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #d9d9d9;
        margin-right: 16px;
        margin-bottom: 16px;
        position: relative;
        div {
          height: 100%;
          width: 100%;
        }
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
        &.one {
          width: 100% !important;
          height: 100% !important;
          margin: 0;
        }

        .delete-icon {
          z-index: 999;
          cursor: pointer;
          width: 40px;
          height: 32px;
          border-radius: 0px 6px 0px 50px;
          background: rgba(255, 45, 45, 0.8);
          position: absolute;
          top: 0;
          right: 0;

          .anticon-close {
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(-50%, -50%);
            color: #ffffff;
          }
        }
      }
      .ant-empty {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
